// 子管理员操作
<template>
  <div class="sonmanag">
    <div class="install-title">
      <div>
        <div @click="cancelClick">
          <img src="/static/img/返回.png" alt="">
        </div>
        <div>
          编辑子管理员
        </div>
      </div>
    </div>
    <div class="install-main">
      <div class="sonmanag-main">
        <div class="sonmanag-namelist">
          <div class="sonm-list-left">
            <small>*</small> 成员：
          </div>
          <div>
            <div @click="namelistClick">
              {{namelistVal}}
            </div>
          </div>
        </div>
        <div class="sonmanag-scopeList">
          <div class="sonm-list-left">
            <small>*</small> 管理范围：
          </div>
          <div class="sonm-scopeList-right">
            <div class="scopeList-select" v-for="(item,index) in scopeLists" :key="index"  @click="scopeListsCLick(index)">
              <div class="scl-s-left">
                <div v-show="isSelectOnly == index"></div>
              </div>
              <div>
                {{item.name}}
              </div>
            </div>
            <div class="scopeList-input" v-show="isSelectShow">
              <div @click="scopeListInputClick">
                {{scopeListInputVal}}
              </div>
            </div>
          </div>
        </div>
        <div class="sonmanag-jurisdiction">
          <div class="sonm-list-left">
            <small>*</small> 分配权限：
          </div>
          <div class="sonm-jurisdiction-right">
            <div class="jurisdiction-r-title">
              <div>
                （将会在以上通讯录范围内配置权限）
              </div>
              <div class="jd-r-t-right">
                <div>
                  <img v-if="jurisdictionAllShow" src="/static/img/iconfont_xuanzhong@2x.png" alt="" @click="changeAllShowClick(0)">
                  <img v-else src="/static/img/iconfont_weixuan@2x.png" alt="" @click="changeAllShowClick(1)">
                </div>
                <div>
                  全部权限
                </div>
              </div>
            </div>
            <div class="jurisdiction-r-list">
              <!-- 资源列表 -->
              <ul v-show="sourceLists!=''">
                <li class="jurisdictionListLi" v-for="(item,index) in sourceLists" :key="index">
                  <div class="jurisdictionListLi-left">
                    <img :src="item.logo  | orgLogoFun" alt=""> &nbsp;&nbsp; {{item.name}}
                  </div>
                  <div class="jurisdictionListLi-right">
                    <div>
                      <img v-show="item.show==1" src="/static/img/iconfont_xuanzhong@2x.png" alt="" @click="changeSourceShowClick(index,0)">
                      <img v-show="item.show==0" src="/static/img/iconfont_weixuan@2x.png" alt="" @click="changeSourceShowClick(index,1)">
                    </div>
                    <div>
                      全部权限
                    </div>
                  </div>
                </li>
              </ul>
              <!-- app列表 -->
              <ul v-show="jurLists!=''">
                <li class="jurisdictionListLi" v-for="(item,index) in jurLists" :key="index">
                  <div class="jurisdictionListLi-left">
                    <img :src="item.logo  | orgLogoFun" alt=""> &nbsp;&nbsp; {{item.name}}
                  </div>
                  <div class="jurisdictionListLi-right">
                    <div>
                      <img v-show="item.show==1" src="/static/img/iconfont_xuanzhong@2x.png" alt="" @click="changeShowClick(index,0)">
                      <img v-show="item.show==0" src="/static/img/iconfont_weixuan@2x.png" alt="" @click="changeShowClick(index,1)">
                    </div>
                    <div>
                      全部权限
                    </div>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="sonmanag-but">
          <div class="sonm-list-left">
          </div>
          <el-button type="primary" size="small" @click="saveClick">保存</el-button>
        </div>
      </div>
    </div>
    <!-- 新增人员弹出框 -->
    <v-addPelete :isupdatePop="updatePopShow" @affirm="affirmUserListsClick" @cancel="cancelUserListsClick" :userselectpop="userselectpopLists"></v-addPelete>
    <!-- 新增部门弹出框 -->
    <v-addDeptis :updatePop="DeptupdatePopShow" @affirm="DeptaffirmUserListsClick" @cancel="DeptcancelUserListsClick" :Deptselectpop="DeptselectpopLists"></v-addDeptis>
  </div>
</template>
<script>
import { mapActions } from "vuex";
import baseObj from "assets/base";
import addPelete from "../../cModel/addPelete.vue";
import addDeptis from "../../cModel/addDeptis.vue";
export default {
  components: {
    "v-addPelete": addPelete,
    "v-addDeptis": addDeptis
  },
  data() {
    return {
      updatePopShow: false, // 人员选择列表
      transferPDepitLLists: [], // 成员未选中列表-部门
      transferPUserLLists: [], // 成员未选中列表-人员
      userselectpopLists: [], // 已选中的人员-编辑时使用
      userselectpopCopyLists: [],

      DeptupdatePopShow: false, // 部门选择列表
      DepttransferPDepitLLists: [], // 部门未选中列表-部门
      DeptselectpopLists: [], //编辑时传入已有部门-编辑时使用
      DeptselectpopCopyLists: [],
      DepttransferPUserLLists: [], // 部门未选中列表-人员
      isSelectShow: false, // 控制特定部门选择

      memberIdVals: "", // 成员id
      namelistVal: "请选择成员", // 选择人员对应数据

      scopeListInputIdVals: "", // 部门id
      scopeListInputVal: "请选择部门", // 选择部门对应数据

      jurisdictionAllShow: false, // 全部权限
      isSelectOnly: 2, // 部门单选
      scopeLists: [
        {
          name: "全公司"
        },
        {
          name: "所在部门以及下级部门"
        },
        {
          name: "特定部门"
        }
      ], // 管理范围列表
      jurLists: [], // 权限列表
      sourceLists: [], //资源列表
      id: [], //成员id
      adminType: "", //管理员类型
      appIds: [], //选中的应用
      sourceIds: [], //选中的资源
      saveClickTrueOrFalse: false, //保存一次
      scopeType: "SPECIFY", //管理范围
      scope: {}, //管理范围要传的参数
      memberIDs: [], //部门信息需要的memberid
      deptIDs: [] //部门信息需要的deptid
    };
  },
  filters: {
    orgLogoFun(val) {
      if (val && val != "null") {
        return val;
      } else {
        return "/static/img/默认图片.png";
      }
    }
  },
  created: function() {
    var self = this;
    var accessToken = sessionStorage.getItem("accessToken");
    self.id = this.$route.query.id;
    if (accessToken) {
      this.listFun();
    }
  },
  watch: {},
  methods: {
    // 列表
    listFun() {
      var self = this;
      self
        .getapiorgsettingget({
          id: self.id
        })
        .then(data => {
          if (data.statusCode == 200) {
            if (data.data) {
              self.scope = data.data.scope;
              self.scopeType = data.data.scopeType;
              // 选择人员对应数据
              var memberIdValArr = [];
              var namelistValArr = [];
              var userselectpopListArr = [];
              data.data.memberList.forEach(function(ele, ind) {
                memberIdValArr.push(ele.memberId);
                namelistValArr.push(ele.memberName);
                userselectpopListArr.push({
                  companyId: ele.companyId,
                  deptIds: ele.deptIds,
                  deptNames: ele.deptNames,
                  memberId: ele.memberId,
                  mobile: ele.mobile,
                  name: ele.memberName,
                  passportId: ele.passportId
                });
              });
              self.userselectpopCopyLists = userselectpopListArr;
              self.namelistVal = namelistValArr.join(",");
              self.memberIdVals = memberIdValArr;

              // 特定部门
              if (data.data.scopeType == "SPECIFY") {
                var scopeListInputIdValArr = [];
                var scopeListInputValArr = [];
                var DeptselectpopListArr = [];
                data.data.deptList.forEach(function(ele, ind) {
                  scopeListInputIdValArr.push(ele.id);
                  scopeListInputValArr.push(ele.name);
                  // 已选中的部门-编辑时使用
                  DeptselectpopListArr.push({
                    id: ele.id,
                    name: ele.name
                  });
                });
                self.scopeListInputIdVals = scopeListInputIdValArr;
                self.scopeListInputVal = scopeListInputValArr.join(",");
                self.DeptselectpopCopyLists = DeptselectpopListArr;
              }

              //判断管理范围
              if (data.data.scopeType == "ALL") {
                self.isSelectOnly = 0;
              } else if (data.data.scopeType == "CURRENT") {
                self.isSelectOnly = 1;
              } else if (data.data.scopeType == "SPECIFY") {
                self.isSelectOnly = 2;
                self.isSelectShow = true;
              }
              self.jurLists = data.data.indexVos;
              self.sourceLists = data.data.sourceVos;
              self.appIds = data.data.appIds;
              self.adminType = data.data.adminType;
              self.sourceIds = data.data.sourceIds;
              if (
                self.jurLists.length + self.sourceLists.length ==
                self.appIds.length + self.sourceIds.length
              ) {
                self.jurisdictionAllShow = true;
              }
            }
          } else {
            self.$message({
              type: "info",
              message: data.statusMessage
            });
          }
        })
        .catch(msg => {
          self.$message({
            type: "info",
            message: "服务器异常"
          });
        });
    },
    // 选择成员
    namelistClick() {
      var self = this;
      if (self.userselectpopCopyLists.length > 0) {
        self.userselectpopLists = self.userselectpopCopyLists;
      }
      this.updatePopShow = true;
      this.$store.commit("setMutviewShow", true);
    },
    // 人员确认
    affirmUserListsClick(val) {
      var self = this;
      if (val.length > 0) {
        var memberArr = [];
        var memberNameArr = [];
        val.forEach(function(ele, ind) {
          memberArr.push(ele.memberId);
          memberNameArr.push(ele.name);
        });
        self.memberIdVals = memberArr;
        self.namelistVal = memberNameArr.join(",");
        self.userselectpopCopyLists = val;
      } else {
        self.memberIdVals = "";
        self.namelistVal = "请选择成员";
        self.userselectpopCopyLists = [];
      }
      this.updatePopShow = false;
      this.$store.commit("setMutviewShow", false);
    },
    // 选择人员取消
    cancelUserListsClick(val) {
      var self = this;
      if (val.length > 0) {
        self.userselectpopCopyLists = val;
      }
      this.updatePopShow = false;
      this.$store.commit("setMutviewShow", false);
    },
    // 选择部门
    scopeListInputClick() {
      var self = this;
      this.DeptupdatePopShow = true;
      this.$store.commit("setMutviewShow", true);
      if (self.DeptselectpopCopyLists.length > 0) {
        self.DeptselectpopLists = self.DeptselectpopCopyLists;
      }
    },
    // 选择部门取消
    DeptcancelUserListsClick() {
      var self = this;
      this.DeptupdatePopShow = false;
      if (val.length > 0) {
        self.DeptselectpopCopyLists = val;
      }
      this.$store.commit("setMutviewShow", false);
    },
    // 选择部门确认
    DeptaffirmUserListsClick(val) {
      this.DeptupdatePopShow = false;
      this.$store.commit("setMutviewShow", false);
      var self = this;
      if (val.length > 0) {
        var memberArr = [];
        var memberNameArr = [];
        val.forEach(function(ele, ind) {
          memberArr.push(ele.id);
          memberNameArr.push(ele.name);
        });
        self.scopeListInputIdVals = memberArr.join(",");
        //调新增时要传的部门id
        self.deptIDs = memberArr;
        //显示的部门名称
        self.scopeListInputVal = memberNameArr.join(",");
        self.scope = {
          scopeType: self.scopeType,
          deptIds: self.deptIDs
        };
        self.DeptselectpopCopyLists = [];
        self.DeptselectpopCopyLists = val;
      } else {
        self.scopeListInputIdVals = "";
        self.scopeListInputVal = "请选择部门";
        self.DeptselectpopCopyLists = [];
      }
    },
    // 选择管理范围单选
    scopeListsCLick(index) {
      var self = this;
      self.isSelectOnly = index;
      if (self.isSelectOnly == 1) {
        self.isSelectShow = false;
        self.scopeType = "CURRENT";
        self.scope = { scopeType: "CURRENT" };
      }
      if (self.isSelectOnly == 2) {
        self.isSelectShow = true;
        self.scopeType = "SPECIFY";
      } else if (self.isSelectOnly == 0) {
        self.isSelectShow = false;
        self.scopeType = "ALL";
        self.scope = { scopeType: "ALL" };
      }
    },
    //全选
    changeAllShowClick(index) {
      this.jurisdictionAllShow = index;
      this.jurLists.forEach(function(ele) {
        ele.show = index;
      });
      this.sourceLists.forEach(function(ele) {
        ele.show = index;
      });
    },
    //编辑保存
    saveClick() {
      var self = this;
      self.addClickTrueOrFalse = false;
      var appIds = [];
      var roleIds = [];
      var sourceIds = [];
      // app列表
      self.jurLists.forEach(function(ele, ind) {
        if (ele.show == 1) {
          appIds.push(self.jurLists[ind].appKey);
          roleIds.push(self.jurLists[ind].appRoleId);
        }
      });
      console.log(appIds, roleIds);
      // 资源列表
      self.sourceLists.forEach(function(ele, ind) {
        if (ele.show == 1) {
          sourceIds.push(self.sourceLists[ind].sourceId);
          roleIds.push(self.sourceLists[ind].sourceRoleId);
        }
      });
      if (self.addClickTrueOrFalse == false) {
        self.addClickTrueOrFalse = true;
        if (self.memberIdVals == "") {
          self.$message({
            type: "info",
            message: "请选择人员"
          });
          self.addClickTrueOrFalse = false;
        } else if (
          self.scopeType == "SPECIFY" &&
          self.scopeListInputIdVals == ""
        ) {
          self.$message({
            type: "info",
            message: "请选择部门"
          });
          self.addClickTrueOrFalse = false;
        } else if (roleIds == "") {
          self.$message({
            type: "info",
            message: "请勾选权限"
          });
          self.addClickTrueOrFalse = false;
        } else {
          var obj = {
            id: self.id,
            memberIds: self.memberIdVals,
            orgId: sessionStorage.getItem("ORGID"),
            adminType: "SUB",
            scopeType: self.scopeType,
            scope: self.scope,
            appIds: appIds,
            roleIds: roleIds,
            sourceIds: sourceIds
          };
          self
            .getapiorgsettingupdate(JSON.stringify(obj))
            .then(data => {
              if (data.statusCode == 200) {
                self.$router.push("sonmanag");
                self.$message({
                  type: "success",
                  message: "保存成功！"
                });
              } else {
                self.$message({
                  type: "info",
                  message: data.statusMessage
                });
              }
            })
            .catch(msg => {
              self.$message({
                type: "info",
                message: "服务器异常"
              });
            });
        }
      }
    },
    //修改应用权限显示
    changeShowClick(index, param) {
      var self = this;
      self.sourceLists.forEach(function(ele, ind) {
        if (ele.name == "工作台") {
          if (ele.show == 0) {
            self.$message({
              type: "info",
              message: "请先勾选工作台"
            });
          } else {
            self.jurLists[index].show = param;
            if (param == 0) {
              self.jurisdictionAllShow = false;
            } else if (param == 1) {
              var arr = [];
              self.jurLists.forEach(function(ele, index) {
                if (ele.show == 1) {
                  arr.push(ele.id);
                }
              });
              self.sourceLists.forEach(function(ele, index) {
                if (ele.show == 1) {
                  arr.push(ele.id);
                }
              });
              if (
                arr.length ==
                self.jurLists.length + self.sourceLists.length
              ) {
                self.jurisdictionAllShow = true;
              }
            }
          }
        }
      });
    },
    //修改资源权限显示
    changeSourceShowClick(index, param) {
      var self = this;
      self.sourceLists[index].show = param;
      if (param == 0) {
        self.jurisdictionAllShow = false;
        self.jurisdictionAllShow = false;
        if (self.sourceLists[index].name == "工作台") {
          self.jurLists.forEach(function(ele, ind) {
            ele.show = 0;
          });
        }
      } else if (param == 1) {
        var arr = [];
        self.jurLists.forEach(function(ele, index) {
          if (ele.show == 1) {
            arr.push(ele.id);
          }
        });
        self.sourceLists.forEach(function(ele, index) {
          if (ele.show == 1) {
            arr.push(ele.id);
          }
        });
        if (arr.length == self.jurLists.length + self.sourceLists.length) {
          self.jurisdictionAllShow = true;
        }
      }
    },
    // 点击返回
    cancelClick() {
      this.$router.push({
        path: "/home/install/sonmanag"
      });
    },
    ...mapActions(["getapiorgsettingget", "getapiorgsettingupdate"])
  }
};
</script>
<style scoped>
.jurisdictionListLi-left {
  display: flex;
  align-items: center;
  margin-left: 10px;
  height: 50px;
}

.jurisdictionListLi-left img {
  height: 30px;
  width: 30px;
  border-radius: 4px;
}

.jurisdictionListLi-right > div:nth-child(1) {
  width: 20px;
  height: 20px;
  margin-right: 7px;
  cursor: pointer;
}

.jurisdictionListLi-right > div:nth-child(1) img {
  width: 100%;
  height: 100%;
}

.jurisdictionListLi-right {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-right: 10px;
}

.jurisdictionListLi:nth-child(1) {
  border: 0;
}

.jurisdictionListLi {
  width: 100%;
  height: 50px;
  border-top: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.jurisdiction-r-list ul {
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid #ccc;
}

.jurisdiction-r-list {
  width: 100%;
  min-height: 50px;
  margin-top: 20px;
}

.jd-r-t-right {
  display: flex;
  align-items: center;
  height: 25px;
  color: #38adff;
  margin-right: 14px;
  cursor: pointer;
}

.jd-r-t-right > div:nth-child(1) {
  width: 20px;
  height: 20px;
  margin-right: 5px;
}

.jd-r-t-right > div:nth-child(1) img {
  width: 20px;
  height: 20px;
}

.jurisdiction-r-title {
  display: flex;
  justify-content: space-between;
  height: 25px;
  align-items: center;
  color: #777;
}

.sonm-jurisdiction-right {
  min-height: 100px;
  width: 570px;
  margin-left: 30px;
  overflow: hidden;
}

.sonmanag-jurisdiction {
  display: flex;
  min-height: 100px;
  margin-top: 20px;
}

.sonmanag-jurisdiction .sonm-list-left {
  width: 150px;
  min-height: 100%;
}

.scl-s-left > div {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #38adff;
}

.scl-s-left {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1px solid #ccc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.scopeList-input {
  width: 100%;
  min-height: 35px;
}

.scopeList-input div {
  border: 1px solid #ccc;
  min-height: 25px;
  border-radius: 5px;
  padding-left: 10px;
  cursor: pointer;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  align-items: center;
  width: 350px;
}

.scopeList-select > div:nth-child(2) {
  margin-left: 10px;
}

.scopeList-select {
  display: flex;
  align-items: center;
  height: 23px;
  width: 100%;
  margin-bottom: 10px;
}

.sonm-scopeList-right {
  min-height: 100px;
  width: 500px;
  margin-left: 30px;
}

.sonmanag-scopeList {
  display: flex;
  min-height: 100px;
  margin-top: 20px;
}

.sonmanag-scopeList .sonm-list-left {
  width: 150px;
  min-height: 100px;
}

.sonmanag-namelist > div:nth-child(2) {
  margin-left: 30px;
}

.sonmanag-namelist > div:nth-child(2) div {
  border: 1px solid #ccc;
  min-height: 25px;
  border-radius: 5px;
  padding-left: 10px;
  cursor: pointer;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  display: flex;
  align-items: center;
  width: 350px;
}

.sonmanag-but > div:nth-child(2) {
  margin-left: 30px;
  width: 55px;
  height: 35px;
  border-radius: 4px;
  background-color: #38adff;
  text-align: center;
  line-height: 35px;
  color: #fff;
  margin-right: 25px;
  cursor: pointer;
}

.sonmanag-but {
  margin-top: 25px;
  display: flex;
  height: 35px;
  align-items: center;
}

.sonmanag-namelist {
  display: flex;
  min-height: 35px;
  /* align-items: center; */
}

.sonm-list-left small {
  color: red;
}

.sonm-list-left {
  width: 150px;
  text-align: right;
  color: #333;
  font-size: 14px;
}

.sonmanag-main {
  width: 91%;
  min-height: 80px;
  margin-bottom: 40px;
}

.install-main {
  min-height: 80px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.install-title {
  height: 80px;
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: center;
}

.install-title > div {
  width: 91%;
  background-color: rgba(56, 173, 255, 0.2);
  height: 40px;
  line-height: 40px;
  font-size: 14px;
  display: flex;
  align-items: center;
}

.install-title > div > div:nth-child(1) {
  width: 20px;
  height: 20px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
  cursor: pointer;
}

.install-title > div > div:nth-child(1) img {
  width: 100%;
  height: 100%;
}

.install-title > div > div:nth-child(2) {
  margin-left: 10px;
  color: #000;
}

.sonmanag {
  overflow: hidden;
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  width: 100%;
  min-height: 400px;
}
</style>